<template>
	<view class="nav">
		<view class="left">
			<view class="leftIcon">
				<uni-icons :type="leftIcon"  size="25"></uni-icons>
			</view>
			<view class="leftText">{{leftText}}</view>
		</view>
		<view class="right">
			<view v-if="rightText" class="rightText">{{rightText}}</view>
			<view class="rightIcon">
				<uni-icons type="right"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps(["leftIcon","leftText","rightText"]);
	
</script>

<style lang="scss" scoped>
.nav {
	display:flex;
	justify-content: space-between;
	align-items: center;
	padding:20rpx;
	height:100rpx;
	line-height: 100rpx;
	// border:1px solid blue;
	.left,.right {
		display:flex;
		color:#5c5c5c;
		font-size: 30rpx;
		:deep(){
			.uni-icons {
				color:$my-icon-color !important;
			}
		}
	}
	.left{
		.leftText{
			margin-left:20rpx;
		}
		.rightText{
			margin-right:20rpx;
		}
	}
	.right {
		.rightText {
			margin-right:20rpx;
		}
	}
}
</style>